import React from 'react'
import style from  '../style/search.module.scss'
import searchIcon from '../image/search _icon.png'
import {hotSearch, exhibitSearch} from '../http/interface'

class Search extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            hotList: [],
            exhibitList: [],
            exhibitionList: [],
            show: false,
            keyword: ''
        }
    }
    componentDidMount() {
        this.hotSearch()
    }
    
    async hotSearch() {
        try {
            // vm.app.showLoading()
            const res = await hotSearch()
            if(res.status == 1) {
                // this.hotList = res.data
                this.setState({
                    hotList: res.data
                })
            }

            // vm.app.hideLoading()
        } catch (error) {
            // vm.app.hideLoading()
        }
    }
    
    async search(e) {
        let keyword = e.target.value
        try {
            let data = {
                keyword: keyword
            }
            const res = await exhibitSearch(data)
            // console.log(res.data.exhibit_info.list)
            this.setState({
                exhibitList: res.data.exhibit_info.list,
                exhibitionList: res.data.exhibition_info.list
            })
            if(res.data.exhibit_info.list.length==0&&res.data.exhibition_info.list.length==0) {
                this.setState({
                    show: true
                })
            }
        } catch (error) {
        }
    }
    input_change(e,f){
        this.setState({
            keyword:e.target.value
         })
    }
    clear() {
        this.setState({
            keyword: ''
        })
    }
    back() {
        this.props.history.go(-1)
    }
    goDetail(id) {
        this.props.history.push(`/exhibit/detail/${id}`)
    }
    goExhibition(id) {
        this.props.history.push(`/exhibition/detail/${id}`)
    }
    render() {
        let hotList = this.state.hotList
        let exhibitList = this.state.exhibitList
        let exhibitionList = this.state.exhibitionList
        let keyword = this.state.keyword
        return(
            <div className={style.search}>
                <div className={style.top}>
                    <div className={style.searchGroup}>
                        <img className={style.sousuo} src={searchIcon} alt=""/>
                        <form className={style.form} action="#!">
                            <input
                                type="text"
                                className={style.searchInput}
                                value={this.state.keyword}
                                onInput={(e)=>{this.search(e)}}
                                onChange={(e)=>{this.input_change(e)}}
                                placeholder="搜索展览/展品"
                            />
                            <input type="text" style={{display:'none'}}/>
                        </form>
                        {
                            keyword ? 
                            <span className={style.clear} v-show="keyword" onClick={() => {this.clear()}}></span>
                            : null
                        }
                    </div>
                    <button className={style.button} onClick={() => {this.back()}}>取消</button>
                </div>
                <div className={style.bottom}>
                    {
                        !this.state.keyword?<div className={style.hotList}>
                            <p className={style.title}>热门搜索</p>
                            {
                                hotList.map((e, index) => {
                                    return <p className={style.hot} key={index} onClick={() => {this.goDetail(e.exhibit_id)}}>
                                            {e.exhibit_name}
                                        </p>
                                })
                            }
                        </div>:null
                    }
                    {
                        this.state.keyword&&(this.state.exhibitList.length||this.state.exhibitionList.length)?
                        <div className={style.list}>
                            {
                                this.state.show&&(!this.state.exhibitList.length&&!this.state.exhibitionList.length)?
                                <div className={style.none}>
                                    没有找到相关内容
                                </div>:null
                            }
                            <p className={style.item}>展项</p>
                            <div className={style.item}>
                                {
                                    exhibitList.map((exhibit, index) => {
                                        return <p key={index} onClick={() => {this.goDetail(exhibit.exhibit_id)}} >
                                            {exhibit.exhibit_name}
                                        </p>
                                    })
                                }
                            </div>
                            <div className={style.item}>
                                {
                                    exhibitionList.map((exhibition, index) => {
                                        return <p key={index}  onClick={() => {this.goExhibition(exhibition.exhibition_id)}}>
                                            {exhibition.exhibition_name}
                                        </p>
                                    })
                                }
                            </div>
                        </div>:null
                    }
                </div>
            </div>
        )
    }
}

export default Search